<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <title>登录</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="author" content="">
  <link href="css/daterangepicker.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/main_1.css">
  <!--[if lt IE 9]>
	<script src="js/html5shiv.min.js"></script>
	<script src="js/respond.min.js"></script>
<![endif]-->
  <meta name="renderer" content="webkit">
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="css/common.css">
  <style>
    .flexItem {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .forget {
      position: absolute;
      right: 0px;
      top: 0px;
      font-size: 12px;
      color: #007AFF;
    }
  </style>
</head>

<body>
  <div id="login" v-cloak>
    <header>
      <div class="content">
        <div class="left"><a href="./06.html" class="logo">长海招聘</a></div>
        <div class="right">
          <div class="user">
            <a href="04.html">登录/注册 <img src="images/face.jpg" alt="" class="face"></a>
          </div>
        </div>
      </div>
    </header>

    <section class="section11">
      <div class="box">
        <div class="left">
          <img src="images/img11.png" alt="" class="cover">
        </div>
        <div class="right">
          <div class="hd">
            <a href="" :class="{'on':active==1}" @click="changeTab($event,1)"> 个人用户 </a>
            <a href="" :class="{'on':active==2}" @click="changeTab($event,2)"> 企业用户</a>
          </div>
          <div class="bd">
            <div class="bd-con">
              <form id="signupForm">
                <ul class="form">
                  <li><input type="text" placeholder="请输入手机号" class="input" id="mobile" name="mobile" v-model="mobile">
                  </li>
                  <li v-if="loginType==1"><input type="text" placeholder="请输入验证码" class="input" id="code" name="code"
                      v-model="code"><span class="btn-yzm" style="cursor:default" @click="sendCode">获取验证码</span></li>
                  <li v-if="loginType==2" style="position:relative;"><input type="password" v-model="password"
                      name="password" id="password" class="input ignore" placeholder="请输入6~16位字母加数字">
                    <div class="forget" @click="link('./02.html')">忘记密码</div>
                  </li>
                  <li>
                    <input type="submit" value="登录" class="btn btn-submit" @click="login($event)">
                  </li>
                </ul>
              </form>
              <div class="other" v-if="loginType==1">
                <span class="blue" @click="loginChange">{{loginType==1?'账号密码登录':'验证码登录'}}</span>
              </div>
              <div class="other flexItem" v-else>
                <span class="" @click="loginChange">{{loginType==1?'账号密码登录':'短信登录'}}</span>
                <span class="blue" @click="Tolink">注册</span>
              </div>
            </div>
          </div>
          <div class="tips">
            <input type="checkbox" class="checkbox" v-model="checkbox">登录注册即同意</input><a href="./03.html"
              class="blue">《用户协议》</a>
          </div>
        </div>
      </div>
    </section>

    <footer>
      <div class="content">
        <div class="menu">
          <a href="20.html">联系我们</a>
          <a href="23.html">意见反馈</a>
          <a href="24.html">关于我们</a>
        </div>
        <div class="cpt">
          Copyright &#169 2019 人员招聘 ICP备14013400号-1京ICP证150920号 电子营业执照 <a href="">京公网安备11010502031234</a> 首都网警 <a
            href="">人力资源服务许可证</a>
        </div>
      </div>
    </footer>
  </div>
  <script src="js/jquery.min.js"></script>
  <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
  <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
  <script src="js/common.js"></script>
  <script src="js/slide.min.js"></script>
  <script src="js/polyfill.min.js"></script>
  <script src="js/jquery.nicescroll3.7.6.min.js"></script>
  <!-- <script src="js/main.js"></script> -->
  <script src="js/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="js/request.js"></script>
  <script src="js/lcommon.js"></script>
  <script>
    // $(function(){

    // 	$("body").on('click', '.hd a', function(event) {
    // 		event.preventDefault();
    // 		if(!$(this).hasClass('on')){
    // 			$(this).addClass('on').siblings().removeClass('on');
    // 			$('.bd-con').css({display: 'none'}).eq($(this).index()).css({display: 'block'})
    // 		}
    // 	});
    // })
    jQuery.validator.addMethod("isMobile", function (value, element, param) {
      var regex = /^1[3|4|5|7|8]\d{9}$/;
      return regex.test(value)
    }, "请输入正确的手机格式！");
   
    var vm = new Vue({
      el: '#login',
      data: {
        loginType: 1, //1-验证码  2-账号密码
        active: GetRequest()&&GetRequest().active?GetRequest().active:1,
        mobile: '',
        code: '',
        password: '',
        checkbox: true,
        clickTime: true
      },
      mounted() {
        var that = this
        
        $("#signupForm").validate({
          rules: rules,
          messages: messages
        });
      },
      watch: {
        mobile: function (val) {
          if (val.length > 11) {
            this.mobile = val.substring(0, 11)
          }
        }
      },
      methods: {
        Tolink:function(){
          location.href="./04.html?active="+this.active
        },
        link(url) {
          location.href = url
        },
        changeTab: function (e, num) {
          e.preventDefault()
          if (num == this.active) {
            return false
          }
          this.active = num
          clearYzm($('.btn-yzm'))
        },
        //登录方式切换
        loginChange: function () {
          this.loginType = this.loginType == 1 ? 2 : 1
        },
        sendCode: function () {
          var that = this
          if ($(".btn-yzm").hasClass("disabled")) {
            return false
          }
          $.validator.setDefaults({
            ignore: ".ignore"
          })
          var flag = $("#mobile").valid();
          if (flag) {
            var url = this.active == 1 ? 'person/user/sms' : 'enterprise/user/sms'
            // type 1 为登录 2 为注册 3 为忘记密码
            request(url, 'POST', JSON.stringify({
              account: this.mobile,
              type: 1
            }), function (res) {
              timeClock($(".btn-yzm"));
              that.$message.success(res.message);
            }, function (err) {
              that.$message.error(err.message);
            })
          }
        },
        isPhone: function (phone) {
          var regex = /^1[3|4|5|7|8]\d{9}$/;
          return regex.test(phone)
        },
        login: function (e) {
          e.preventDefault()
          if (!this.clickTime) {
            return false
          }
          this.clickTime = false
          var flag = $("#signupForm").valid(),
            that = this
          if (flag) {
            var url = this.active == 1 ? 'person/user/login' : 'enterprise/user/login'
            login({
              data: JSON.stringify({
                account: this.mobile,
                password: this.loginType == 1 ? this.code : this.password,
                type: this.loginType == 1 ? 1 : undefined
              }),
              isUser: this.active == 1,
              success: function (res) {
                that.$message.success(res.message);
              },
              fail: function (err) {
                setTimeout(function () {
                  that.clickTime = true
                }, 1500)
                that.$message.error(err.responseJSON.message);
              }
            })
          }
        }

      },

    })
  </script>
</body>

</html>